<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PERSONA 5 - 文案存储库</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #000000 0%, #1a0b2e 100%);
            color: #fff;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 20px;
        }
        
        .logo {
            font-size: 3.5rem;
            font-weight: 900;
            color: #e70e0e;
            text-shadow: 0 0 10px rgba(231, 14, 14, 0.7);
            letter-spacing: 5px;
            margin-bottom: 10px;
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: #aaa;
            letter-spacing: 2px;
        }
        
        .main-content {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
        }
        
        .input-section, .storage-section {
            flex: 1;
            min-width: 300px;
            background: rgba(20, 20, 20, 0.9);
            border-radius: 10px;
            padding: 25px;
            border: 2px solid #e70e0e;
        }
        
        .section-title {
            font-size: 1.5rem;
            color: #e70e0e;
            margin-bottom: 20px;
        }
        
        .input-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            color: #ccc;
        }
        
        input, textarea {
            width: 100%;
            padding: 12px;
            background: rgba(40, 40, 40, 0.9);
            border: 1px solid #444;
            border-radius: 5px;
            color: #fff;
            font-size: 1rem;
        }
        
        textarea {
            min-height: 150px;
            resize: vertical;
        }
        
        .btn {
            background: #e70e0e;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        
        .btn:hover {
            background: #ff5252;
        }
        
        .btn-clear {
            background: #333;
        }
        
        .storage-list {
            max-height: 400px;
            overflow-y: auto;
            margin-bottom: 20px;
        }
        
        .text-item {
            background: rgba(40, 40, 40, 0.9);
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 15px;
            border-left: 3px solid #e70e0e;
        }
        
        .item-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            color: #e70e0e;
        }
        
        .item-content {
            color: #ddd;
            line-height: 1.5;
            white-space: pre-wrap;
        }
        
        .empty-message {
            text-align: center;
            color: #777;
            font-style: italic;
            padding: 30px 0;
        }
        
        .delete-btn {
            background: #e70e0e;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
        }
        
        footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            color: #777;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #e70e0e;
            color: white;
            padding: 15px 20px;
            border-radius: 5px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1 class="logo">PERSONA</h1>
            <p class="subtitle">文案存储系统 - 心之怪盗团专用</p>
        </header>
        
        <div class="main-content">
            <section class="input-section">
                <h2 class="section-title">新文案录入</h2>
                
                <div class="input-group">
                    <label for="textTitle">标题</label>
                    <input type="text" id="textTitle" placeholder="输入文案标题...">
                </div>
                
                <div class="input-group">
                    <label for="textContent">文案内容</label>
                    <textarea id="textContent" placeholder="输入你的文案内容..."></textarea>
                </div>
                
                <div>
                    <button id="saveBtn" class="btn">保存文案</button>
                    <button id="clearBtn" class="btn btn-clear">清空输入</button>
                </div>
            </section>
            
            <section class="storage-section">
                <h2 class="section-title">已存储文案</h2>
                
                <div id="storageList" class="storage-list">
                    <div class="empty-message">暂无存储的文案</div>
                </div>
                
                <div>
                    <button id="clearAllBtn" class="btn btn-clear">清空所有文案</button>
                </div>
            </section>
        </div>
        
        <footer>
            <p>心之怪盗团 · 改变世界的意志</p>
        </footer>
    </div>

    <div id="notification" class="notification"></div>

    <script>
        // 简单的存储管理类
        class TextManager {
            constructor() {
                this.storageKey = 'personaTexts';
                this.init();
            }
            
            init() {
                this.bindEvents();
                this.loadTexts();
            }
            
            bindEvents() {
                // 绑定按钮事件
                document.getElementById('saveBtn').addEventListener('click', () => this.saveText());
                document.getElementById('clearBtn').addEventListener('click', () => this.clearInput());
                document.getElementById('clearAllBtn').addEventListener('click', () => this.clearAllTexts());
                
                // 添加回车键保存功能
                document.getElementById('textContent').addEventListener('keydown', (e) => {
                    if (e.ctrlKey && e.key === 'Enter') {
                        this.saveText();
                    }
                });
            }
            
            // 保存文案
            saveText() {
                console.log('保存按钮被点击');
                
                const title = document.getElementById('textTitle').value.trim();
                const content = document.getElementById('textContent').value.trim();
                
                // 验证输入
                if (!title) {
                    this.showMessage('请输入标题！', 'error');
                    return;
                }
                if (!content) {
                    this.showMessage('请输入内容！', 'error');
                    return;
                }
                
                try {
                    // 获取现有数据
                    const texts = this.getTexts();
                    
                    // 生成新ID
                    const newId = texts.length > 0 ? Math.max(...texts.map(t => t.id)) + 1 : 1;
                    
                    // 创建新文案
                    const newText = {
                        id: newId,
                        title: title,
                        content: content,
                        timestamp: new Date().toLocaleString('zh-CN')
                    };
                    
                    // 添加到数组
                    texts.push(newText);
                    
                    // 保存到localStorage
                    localStorage.setItem(this.storageKey, JSON.stringify(texts));
                    
                    // 更新显示
                    this.loadTexts();
                    
                    // 清空输入
                    this.clearInput();
                    
                    // 显示成功消息
                    this.showMessage(`文案保存成功！编号: P5-${newId.toString().padStart(3, '0')}`, 'success');
                    
                } catch (error) {
                    console.error('保存失败:', error);
                    this.showMessage('保存失败！', 'error');
                }
            }
            
            // 获取所有文案
            getTexts() {
                try {
                    const stored = localStorage.getItem(this.storageKey);
                    return stored ? JSON.parse(stored) : [];
                } catch (error) {
                    console.error('读取数据失败:', error);
                    return [];
                }
            }
            
            // 加载并显示文案
            loadTexts() {
                const texts = this.getTexts();
                const storageList = document.getElementById('storageList');
                
                if (texts.length === 0) {
                    storageList.innerHTML = '<div class="empty-message">暂无存储的文案</div>';
                    return;
                }
                
                // 按ID降序排列
                texts.sort((a, b) => b.id - a.id);
                
                let html = '';
                texts.forEach(text => {
                    html += `
                        <div class="text-item">
                            <div class="item-header">
                                <strong>P5-${text.id.toString().padStart(3, '0')}</strong>
                                <span>${text.timestamp}</span>
                                <button class="delete-btn" onclick="textManager.deleteText(${text.id})">删除</button>
                            </div>
                            <h3>${this.escapeHtml(text.title)}</h3>
                            <div class="item-content">${this.escapeHtml(text.content)}</div>
                        </div>
                    `;
                });
                
                storageList.innerHTML = html;
            }
            
            // 删除文案
            deleteText(id) {
                if (confirm('确定要删除这条文案吗？')) {
                    try {
                        const texts = this.getTexts().filter(text => text.id !== id);
                        localStorage.setItem(this.storageKey, JSON.stringify(texts));
                        this.loadTexts();
                        this.showMessage('文案已删除', 'success');
                    } catch (error) {
                        console.error('删除失败:', error);
                        this.showMessage('删除失败', 'error');
                    }
                }
            }
            
            // 清空输入
            clearInput() {
                document.getElementById('textTitle').value = '';
                document.getElementById('textContent').value = '';
                document.getElementById('textTitle').focus();
            }
            
            // 清空所有文案
            clearAllTexts() {
                const texts = this.getTexts();
                if (texts.length === 0) {
                    this.showMessage('没有可清除的文案', 'info');
                    return;
                }
                
                if (confirm(`确定要清空所有 ${texts.length} 条文案吗？此操作不可撤销！`)) {
                    try {
                        localStorage.removeItem(this.storageKey);
                        this.loadTexts();
                        this.showMessage('所有文案已清空', 'success');
                    } catch (error) {
                        console.error('清空失败:', error);
                        this.showMessage('清空失败', 'error');
                    }
                }
            }
            
            // 显示消息
            showMessage(message, type = 'info') {
                const notification = document.getElementById('notification');
                notification.textContent = message;
                notification.style.display = 'block';
                
                // 设置颜色
                if (type === 'error') {
                    notification.style.background = '#e70e0e';
                } else if (type === 'success') {
                    notification.style.background = '#4CAF50';
                } else {
                    notification.style.background = '#2196F3';
                }
                
                // 3秒后隐藏
                setTimeout(() => {
                    notification.style.display = 'none';
                }, 3000);
            }
            
            // HTML转义
            escapeHtml(text) {
                const div = document.createElement('div');
                div.textContent = text;
                return div.innerHTML;
            }
        }

        // 初始化应用
        let textManager;
        document.addEventListener('DOMContentLoaded', function() {
            console.log('页面加载完成，初始化TextManager...');
            textManager = new TextManager();
            console.log('TextManager初始化完成');
        });
    </script>
</body>
</html>